<template>
    <div class="hd">
        <n-space>
            <n-input v-model:value="searchParam.username" @keydown.enter.prevent type="text" placeholder="用戶名" />
            <n-button @click="onSearch">搜索</n-button>
            <div class="tips">
                <span>時間：</span>
                <jSort :num="sorts.timer" @change="onSort($event, 'timer')"></jSort>
            </div>
        </n-space>
    </div>

    <div class="list">
        <div class="item" v-for="item in list" :key="item.timer">
            <div class="vds">
                <img :src="item.formatImg" class="poster" />
            </div>
            <div class="info">
                <div class="ts name">{{ item.user.username }}</div>
                <div class="ts">{{ item.formatTimer }}</div>
            </div>
        </div>
    </div>
    <div class="j-page">
        <n-pagination :page-slot="7" @update:page="onPage" v-model:page="logStore.page" :page-count="logStore.totalPages" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from "vue";
import { NForm, NPagination, NIcon, NTreeSelect, NInput, NButton, NFormItem, NSpace, NTag, useMessage } from "naive-ui";
import { useLogStore } from "@/stores/log";
import { useVideoStore } from "@/stores/video";
import jSort from "@/components/j-sort/index.vue"
import Test from "./test.vue"
import { format } from "@/comm/format";
const logStore = useLogStore();
const videoStore = useVideoStore()

const searchParam = reactive({
    username: ""
})

const onSearch = () => {
    logStore.username = searchParam.username;
    logStore.load();
}

const list = computed(() => {
    return logStore.list.map(i => {
        return {
            ...i,
            formatTimer: format(i.timer),
            formatImg: videoStore.well ? videoStore.well_poster : "https://www.step2step.cn/proxy/images/" + i.pic
        }
    })
})

const sorts = reactive({
    timer: 0
})

const onSort = (num: number, type: string) => {
    console.log("change sort");
    (sorts as any)[type] = num;
    logStore.sort = num;
    logStore.load();
}

onMounted(async () => {
    logStore.load();
});

const onPage = (n: number) => {
    logStore.page = n;
    setTimeout(() => {
        logStore.load();
    }, 30);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
